<template>
  <div>
    <nut-popup
      v-model:visible="isVisible"
      position="bottom"
      style="border-radius: 10px 10px 0 0"
    >
      <div class="addModel">
        <div class="flex flexBetween">
          <div class="address">
            {{
              formData.type == EditType.ADD ? "添加收货地址" : "编辑收货地址"
            }}
          </div>
          <nut-icon name="close" class="close" @click="onClose"></nut-icon>
        </div>
        <nut-form :model-value="formData" ref="ruleForm" :rules="rules">
          <nut-form-item label="收件人" prop="receiver">
            <input
              class="nut-input-text"
              v-model="formData.receiver"
              placeholder="请输入收件人"
              maxlength="10"
              type="text"
            />
          </nut-form-item>

          <nut-form-item
            label="联系电话"
            prop="phone"
            :rules="[
              {
                regex:
                  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                message: '手机号码填写不正确',
              },
            ]"
          >
            <input
              class="nut-input-text"
              v-model="formData.phone"
              placeholder="请输入联系电话"
              type="text"
            />
          </nut-form-item>
          <nut-form-item label="所在地区" prop="city_province">
            <nut-input
              class="nut-input-text"
              v-model="formData.city_province"
              placeholder="请选择"
              type="text"
              right-icon="rect-right"
              readonly
              @click="showAddress"
              style="color: #666 !important"
            />
            <nut-cascader
              title="地址选择"
              v-model:visible="state.visible"
              v-model="formData.city_province as any"
              text-key="label"
              @change="events.change"
              @path-change="events.pathChange"
              value-key="label"
              children-key="children"
              :options="options"
            ></nut-cascader>
          </nut-form-item>
          <nut-form-item label="详细地址" prop="detail">
            <input
              class="nut-input-text"
              v-model="formData.detail"
              placeholder="街道、楼牌号等"
              type="text"
              maxlength="100"
            />
          </nut-form-item>
          <nut-cell v-if="formData.type == EditType.ADD">
            <nut-button
              type="primary"
              block
              color="linear-gradient(to right, #3EBD33, #9FDF4F)"
              style="margin-right: 10px"
              @click="submit"
               v-preventReClick
              >保存</nut-button
            >
          </nut-cell>
          <nut-cell v-else class="flex">
            <nut-button
              block
              class="f1"
              style="margin-right: 10px; color: #40ae36; border-color: #40ae36"
              @click="onDelete"
              >删除</nut-button
            >
            <nut-button
              type="primary"
              block
              class="f1"
              color="linear-gradient(to right, #3EBD33, #9FDF4F)"
              @click="submit"
               v-preventReClick
              >保存</nut-button
            >
          </nut-cell>
        </nut-form>
      </div>
    </nut-popup>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, nextTick, ref } from "vue";
import { Toast } from "@nutui/nutui";
import { EditType } from "@/type/BaseEnum";
import PROVICE from "@/utils/provice";
import useInstance from "@/hooks/useInstance";
import { AddressListType } from "@/api/address/AddressModel";
import { insertAddressApi, editAddressApi, delAddressApi } from "@/api/address";
const { global } = useInstance();
const isVisible = ref<boolean>(false);
//注册事件
const emits = defineEmits(["reFresh"]);
const rules = {
  detail: [{ required: true, message: "请输入详细地址" }],
  city_province: [{ required: true, message: "请选择" }],
  phone: [{ required: true, message: "请填写电话" }],
  receiver: [{ required: true, message: "请输入收件人" }],
};
const formData = reactive<AddressListType>({
  city_province: undefined,
  detail: undefined,
  phone: undefined,
  receiver: undefined,
  status: undefined,
  tel: undefined,
  userid: undefined,
  id: undefined,
  type: undefined,
});

const ruleForm = ref<any>(null);

const submit = () => {
  ruleForm.value.validate().then(async ({ valid, errors }: any) => {
    if (valid) {
      let res = null;
      if (formData.type == EditType.ADD) {
        res = await insertAddressApi(formData as any);
      } else {
        res = await editAddressApi(formData as any);
      }
      if (res && res.code == 0) {
        Toast.success(formData.type == EditType.ADD ? "新增成功" : "编辑成功");

        emits("reFresh");
        onClose();
      }
    } else {
      console.log("error submit!!", errors);
    }
  });
};
// 自定义属性名称
const state = reactive({
  visible: false,
  value: ["福建", "福州", "台江区"],
});
const options = ref<any>([]);
const reset = () => {
  formData.city_province = undefined;
  formData.detail = undefined;
  formData.phone = undefined;
  formData.receiver = undefined;
  formData.status = undefined;
  formData.tel = undefined;
  formData.userid = undefined;
  formData.id = undefined;
  formData.type = undefined;
};

const showAddress = () => {
  state.visible = true;
};

const show = (type: string, row: any) => {
  options.value = PROVICE;

  if (type === EditType.ADD) {
  } else {
    nextTick(() => {
      //把要编辑的数据复制到表单绑定的对象
      global.$objCoppy(row, formData);
    });
  }

  isVisible.value = true;
  reset();
  formData.type = type;
};
const onClose = () => {
  isVisible.value = false;
};
const events = {
  change(...args: any) {
    console.log("change", ...args);
  },
  pathChange(...args: any) {
    console.log("pathChange", ...args);
  },
};

const onDelete = async () => {
  //信息确定
  let confirm = await global.$myconfirm("确定删除该数据吗?");

  if (confirm) {
    let res = await delAddressApi({
      id: formData.id,
    });

    if (res && res.code == 0) {
      Toast.success("删除成功");
      emits("reFresh");
      onClose();
    }
  }
};
defineExpose({
  show,
});
</script>
<style scoped lang="scss">
.addModel {
  border-radius: 20px 20px 0 0;
  padding: 36px 30px;
}
.address {
  font-size: 32px;
  font-weight: bold;
  color: #000;
}
.close {
  font-size: 26px !important;
  font-weight: bold;
}
:deep(.nut-input .input-text, .nut-input__text--readonly) {
  color: #666 !important;
}
</style>
